<!-- pages/register.vue -->
<template>
    <div class="register-container">
        <a-card title="用户注册" class="register-card">
            <a-form :model="form" :rules="rules" @finish="handleRegister" class="register-form">
                <a-form-item name="username">
                    <a-input v-model:value="form.username" placeholder="用户名" size="large">
                        <template #prefix>
                            <UserOutlined />
                        </template>
                    </a-input>
                </a-form-item>

                <a-form-item name="email">
                    <a-input v-model:value="form.email" placeholder="邮箱" size="large">
                        <template #prefix>
                            <MailOutlined />
                        </template>
                    </a-input>
                </a-form-item>

                <a-form-item name="password">
                    <a-input-password v-model:value="form.password" placeholder="密码" size="large">
                        <template #prefix>
                            <LockOutlined />
                        </template>
                    </a-input-password>
                </a-form-item>

                <a-form-item>
                    <a-button type="primary" html-type="submit" size="large" :loading="loading" block>
                        {{ loading ? '注册中...' : '注册' }}
                    </a-button>
                </a-form-item>
            </a-form>

            <div class="login-link">
                已有账号？<a @click="navigateTo('/login')">立即登录</a>
            </div>
        </a-card>
    </div>
</template>
  
<script setup lang="ts">
import { message } from 'ant-design-vue'
import type { Rule } from 'ant-design-vue/es/form'
// 正确导入图标组件
import { UserOutlined, MailOutlined, LockOutlined } from '@ant-design/icons-vue'
interface RegisterForm {
    username: string
    email: string
    password: string
}

const form = reactive<RegisterForm>({
    username: '',
    email: '',
    password: ''
})

const loading = ref(false)

// 表单验证规则
const rules: Record<string, Rule[]> = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 2, max: 20, message: '用户名长度为2-20个字符', trigger: 'blur' }
    ],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度至少为6位', trigger: 'blur' }
    ]
}

const handleRegister = async () => {
    loading.value = true

    try {
        const response = await $fetch('/api/auth/register', {
            method: 'POST',
            body: form
        })

        message.success('注册成功！')

        // 2秒后跳转到登录页
        setTimeout(() => {
            navigateTo('/login')
        }, 2000)

    } catch (error: any) {
        console.error('注册失败:', error)

        // 根据错误状态显示不同的提示
        const status = error.status
        const errorMessage = error.data?.message || '注册失败'

        if (status === 409) {
            message.error('该邮箱已被注册')
        } else if (status >= 500) {
            message.error('服务器错误，请稍后重试')
        } else {
            message.error(errorMessage)
        }
    } finally {
        loading.value = false
    }
}
</script>
  
<style scoped>
.register-container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
}

.register-card {
    width: 100%;
    max-width: 400px;
}

.register-form {
    margin-bottom: 20px;
}

.login-link {
    text-align: center;
    margin-top: 20px;
}
</style>